<template>
  <div id="editorjs" class="editContainer scroll"></div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import throttle from '@/utils/throttle'
import EditorJS from '@editorjs/editorjs'
import Header from 'editorjs-header-with-alignment';
import List from '@editorjs/list';
import RawTool from '@editorjs/raw';
import ImageTool from '@editorjs/image';
import Checklist from '@editorjs/checklist';
import Table from 'editorjs-table';
import Delimiter from '@editorjs/delimiter'
import Warning from '@editorjs/warning'
import InlineCode from '@editorjs/inline-code'
import Embed from '@editorjs/embed'
import Quote from '@editorjs/quote'
import editorjsNestedChecklist from '@calumk/editorjs-nested-checklist';
import ToggleBlock from 'editorjs-toggle-block';
import ColorPlugin from 'editorjs-text-color-plugin';
import CodeBox from '@bomdi/codebox';
import Strikethrough from '@sotaproject/strikethrough';
import Underline from '@editorjs/underline';
import Tooltip from 'editorjs-tooltip';
import TextVariantTune from '@editorjs/text-variant-tune';
import EJLaTeX from 'editorjs-latex';
const editor = ref()
const data = reactive({})
onMounted(() => {
  editor.value = new EditorJS({
    holder: 'editorjs',
    tools: {
      header: {
        class: Header,
        inlineToolbar: ['link'],
        config: {
          placeholder: 'Enter a header',
          levels: [2, 3, 4],
          defaultLevel: 3,
          defaultAlignment: 'left'
        }
      },
      list: {
        class: List,
        inlineToolbar: true,
        config: {
          defaultStyle: 'unordered'
        }
      },
      nestedchecklist: editorjsNestedChecklist,
      image: {
        class: ImageTool,
        config: {
          uploader: {
            async uploadByFile(file: any) {
              const res: response = await window.file.uploader({
                name: file.name,
                path: file.path
              })
              return {
                success: res.success,
                file: {
                  url: `myfile://${res.data}`,
                }
              }
            },
          }

        }
      },
      checklist: {
        class: Checklist,
        inlineToolbar: true,
      },
      raw: RawTool,
      table: {
        class: Table,
        inlineToolbar: true,
        config: {
          rows: 2,
          cols: 3,
        },
      },
      delimiter: Delimiter,
      warning: {
        class: Warning,
        inlineToolbar: true,
        shortcut: 'CTRL+SHIFT+W',
        config: {
          titlePlaceholder: 'Title',
          messagePlaceholder: 'Message',
        },
      },
      Marker: {
        class: ColorPlugin,
        shortcut: 'CTRL+SHIFT+M',
        config: {
          defaultColor: '#FFBF00',
          type: 'marker',
          icon: `<svg fill="#000000" height="200px" width="200px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M17.6,6L6.9,16.7c-0.2,0.2-0.3,0.4-0.3,0.6L6,23.9c0,0.3,0.1,0.6,0.3,0.8C6.5,24.9,6.7,25,7,25c0,0,0.1,0,0.1,0l6.6-0.6 c0.2,0,0.5-0.1,0.6-0.3L25,13.4L17.6,6z"></path> <path d="M26.4,12l1.4-1.4c1.2-1.2,1.1-3.1-0.1-4.3l-3-3c-0.6-0.6-1.3-0.9-2.2-0.9c-0.8,0-1.6,0.3-2.2,0.9L19,4.6L26.4,12z"></path> </g> <g> <path d="M28,29H4c-0.6,0-1-0.4-1-1s0.4-1,1-1h24c0.6,0,1,0.4,1,1S28.6,29,28,29z"></path> </g> </g></svg>`
        }
      },
      inlineCode: {
        class: InlineCode,
        shortcut: 'CTRL+SHIFT+A',
      },
      embed: {
        class: Embed,
        inlineToolbar: true,
        config: {
          services: {
            youtube: true,
            coub: true,
            codepen: {
              regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
              embedUrl: 'https://www.bilibili.com/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
              html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
              height: 300,
              width: 600,
              id: (groups: string[]) => groups.join('/embed/')
            }
          }
        }
      },
      quote: Quote,
      toggle: {
        class: ToggleBlock,
        inlineToolbar: true,
      },
      Color: {
        class: ColorPlugin,
        config: {
          colorCollections: ['#EC7878', '#9C27B0', '#673AB7', '#3F51B5', '#0070FF', '#03A9F4', '#00BCD4', '#4CAF50', '#8BC34A', '#CDDC39', '#FFF'],
          defaultColor: '#FF1300',
          type: 'text',
          customPicker: true
        }
      },
      codeBox: {
        class: CodeBox,
        config: {
          themeURL: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/dracula.min.css', // Optional
          themeName: 'atom-one-dark', // Optional
          useDefaultTheme: 'light' // Optional. This also determines the background color of the language select drop-down
        }
      },
      strikethrough: Strikethrough,
      underline: Underline,
      tooltip: {
        class: Tooltip,
        config: {
          location: 'left',
          highlightColor: '#FFEFD5',
          underline: true,
          backgroundColor: '#154360',
          textColor: '#FDFEFE',
          holder: 'editorId',
        }
      },
      textVariant: TextVariantTune,
      paragraph: {
        tunes: ['textVariant'],
      },
      Math: {
        class: EJLaTeX,
        shortcut: 'CMD+SHIFT+M'
      }
    },
    data,
    onChange: throttle(handleChangeFn, 30 * 1000)
  } as any);
})
const handleChangeFn = () => {
  editor.value.save().then((outputData: any) => {
    const parmas = {
      path: 'D:\/code\/electron-vue\/electron_vue\/electron\/data\/test.json',
      data: JSON.stringify(outputData)
    }
    window.file.savaData(parmas).then((res: response) => {
      console.log(res);
    })
  }).catch((error: Error) => {
    console.log('Saving failed: ', error)
  });
}
</script> 
<style scoped lang="less">
.editContainer {
  width: 100%;
  height: 100%;
  color: black;
  background-color: white;
  overflow-y: scroll;

  ::v-deep .ce-popover__items {
    &::-webkit-scrollbar {
      width: 2px;
      height: 30px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 1px;
      background-color: rgb(219, 219, 219);
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #999;
    }
  }

  ::v-deep .ce-block__content {
    max-width: calc(100% - 126px)
  }

  ::v-deep .ce-block__content {
    max-width: calc(100% - 126px)
  }

  ::v-deep .ce-toolbar__content {
    max-width: calc(100% - 126px)
  }
}
</style>